<script setup lang="ts">
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import ScheduleSchemeShift from '@/components/ScheduleSchemeShift/ScheduleSchemeShift.vue'
import ScheduleSchemeTeam from '@/components/ScheduleSchemeTeam/ScheduleSchemeTeam.vue'
import type { ScheduleScheme } from '@/types'

import { joinUser } from '@/mixins/TeamManagement/helper'

defineProps<{
  data: ScheduleScheme
}>()

const emits = defineEmits<{
  (e: 'edit', o: ScheduleScheme): void
  (e: 'delete', o: ScheduleScheme): void
  (e: 'generate', o: ScheduleScheme): void
}>()
</script>

<template>
  <ElCard shadow="hover" class="footer-border-0 relative">
    <template #header>
      <div class="align-center card-header flex">
        <div class="card-header__title">
          {{ data.name }}
        </div>
        <div class="margin-left-auto card-header__subtitle">
          <TdButton
            title="编辑"
            :icon="Edit"
            type="primary"
            @click="emits('edit', data)"
          />
          <TdButton
            title="删除"
            :icon="Delete"
            type="danger"
            @click="emits('delete', data)"
          />
        </div>
      </div>
    </template>
    <div class="card-content">
      <ElDescriptions border :column="1">
        <ElDescriptionsItem
          label="班次单元名称"
          label-align="center"
          :min-width="120"
        >
          {{ data.shiftUnit.name }}
        </ElDescriptionsItem>
        <ElDescriptionsItem
          label="班次"
          label-align="center"
        >
          <ScheduleSchemeShift
            style="padding-left: 0"
            :data="data.shift"
          />
        </ElDescriptionsItem>
        <ElDescriptionsItem
          label="班组"
          label-align="center"
        >
          <ScheduleSchemeTeam
            style="padding-left: 0"
            :data="data.team"
          />
        </ElDescriptionsItem>
        <ElDescriptionsItem
          label="创建时间"
          label-align="center"
        >
          {{ data.creationTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem
          label="创建人"
          label-align="center"
        >
          {{
            joinUser(
              data.creatorUserName,
              data.creatorLoginName,
            )
          }}
        </ElDescriptionsItem>
        <ElDescriptionsItem
          label="修改时间"
          label-align="center"
        >
          {{ data.updateTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem
          label="修改人"
          label-align="center"
        >
          {{
            joinUser(
              data.updatorUserName,
              data.updatorLoginName,
            )
          }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>
    <template #footer>
      <div class="footer-placeholder">
        <div class="footer-actions text-right">
          <ElButton
            type="primary"
            @click="emits('generate', data)"
          >
            生成计划
          </ElButton>
        </div>
      </div>
    </template>
  </ElCard>
</template>

<style scoped>
.footer-placeholder {
  height: 10px;
}
.footer-border-0 :deep(.el-card__footer) {
  border-top: 0;
}
.footer-actions {
  position: absolute;
  right: var(--el-card-padding, 20px);
  bottom: var(--el-card-padding, 20px);
}
</style>
